﻿<% layout('/layouts/default.html', {title: 'about', libs: ['validate']}){ %>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <!-- 启用360浏览器的极速模式(webkit) -->
    <!-- <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/> -->
    <!-- 添加 favicon icon -->
    <meta name="renderer" content="webkit">
    <meta name="design-width" content="750">
    <title>富乐诊所</title>
    <link rel="stylesheet" href="${ctxStatic}/css/public.css" />
    <script src="${ctxStatic}/js/font-size.js"></script>

    <div class="full-background">
        <header class="header">
            <div class="sub-title p0-40">
                <h1 class="icon-title">富乐诊所列表</h1>
            </div>
        </header>
        <main class="main h100-90">
            <div class="select-hospital h100">
                <div class="city p0-40">
                	<div class="scroll">
                    <% for(var area in areas){ %>
                        <span id="${area.areaCode}" class="active" onclick="change(this.id)">${area.areaName}</span>
                      <% } %>
                  </div>
                </div>
                <div class="container h100-91">
                    <div class="full-background flex-1 auto">
                        <div class="list" id="clinicList">
                           <% for(var clinic in clinicList){ %>
                        		<a href="${ctx}/../fl/about/clinic?id=${clinic.id}" class="item full-row active">
                                ${clinic.name}
                            </a>
                      		<% } %>
                            <div class="footer-layout-por">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
    <div class="footer-layout pc">
        <div href="#" class="item child">
            <div class="icon">
                <img src="img/6e896_6_56_56.png" alt="" class="w56">
            </div>
            <div class="text">走进富乐</div>
            <div class="drop-down">
                <div>
                    <a href="./about.html">富乐诊所</a>
                    <a href="#">新闻动态</a>
                    <a href="#">热门活动</a>
                </div>
            </div>
        </div>
        <a href="./appoinment.html" class="item">
            <div class="icon">
                <img src="img/4bf8d_7_50_49.png" alt="" class="w50">
            </div>
            <div class="text">我要预约</div>
        </a>

        <div class="item child">
            <div class="icon">
                <img src="img/e289f_8_41_55.png" alt="" class="w41">
            </div>
            <div class="text">
                我的
            </div>

            <div class="drop-down">
                <div>
                    <a href="./center.html">个人中心</a>
                    <a href="./center_2.html">我的预约</a>
                    <a href="./center_1.html">我的评价</a>
                    <a href="#">企业活动</a>
                </div>
            </div>
        </div>
    </div>


<% } %>

    <script src="${ctxStatic}/js/jquery.min.js"></script>
    <!-- <script src='js/js.js'></script> -->
    <script>
        $('.select-hospital').on('click', '.scroll span,.list .item,.type .item', function (e) {
            $(this).addClass('active').siblings().removeClass('active');
            // e.preventDefault();
        })

        $('.footer-layout .item').on('click', function (e) {
            $(this).siblings().removeClass('active').find('.drop-down').slideUp();
            $(this).toggleClass('active')
            if ($(this).hasClass('child')) {
                $(this).children('.drop-down').slideToggle();
            }
        })
        $('.full-background').one('click', function () {
            $('.footer-layout .item .drop-down').slideUp();
            $('.footer-layout .item').removeClass('active');
        })
        
        
        function change(areaCode){
					$.post("${ctx}/../fl/about/clinicList?areaCode="+areaCode, function (reply) {

                $("#clinicList").empty();
                if (reply && reply.length > 0) {
                    $.each(reply, function (idx, item) {
                        $("#clinicList").append("<a href='${ctx}/../fl/about/clinic?id="+item.id+"' class='item full-row active'>"+item.name+"</a>");
                    });                              
                }

         });
			}
    </script>